<template>
  <div class="cart">

    <!-- 导航 -->
    <navbar class="navbar"> 
        <div slot="center">购物车({{cartLength}})</div>
    </navbar>

      <!-- 商品列表 -->
    <cartlist></cartlist>

    <!-- 结算 -->
    <cart-bill class="cartBill"></cart-bill>
    <carnull class="cartnull" :class="{isshow:this.$store.state.cartList.length}"></carnull>
    
  </div>
</template>
<script>
import navbar from "../../components/common/navbar/Navbar";
import cartlist from './childcomponent/cartlist'
import cartBill from './childcomponent/cartlBill'
import carnull from './childcomponent/carnull'
export default {
  name: "car",
  components: {
    navbar,
    cartlist,
    cartBill,
    carnull
  },
  data(){
      return{
        isshow:''
      }
  },
  computed:{
      cartLength(){
          return this.$store.state.cartList.length
      }
  },
};
</script>

<style >
.cart{
  width: 100%;
  overflow: hidden;
}
.navbar{
    font-size: 15px;
    font-weight: bold;
    background-color: #ff3324;
    color: white;
}
.cartBill{
  position:absolute;
  bottom: 50px;
}
.cartnull{
  position: absolute;
  z-index: 10;
  top: 25%;
  left: 35%;
}
.isshow{
  display: none;
}
</style>